(function($){
	$(window).load(function(){	
		var span = $("#osp");
		var small = $("#small");
		var spanW = span.width()/2
		var spanH = span.height()/2
		
		var omg = $("img");
		var oBig = $("big");
		
		
		$("#big").css("display","none");
		span.css("display","none");
		
		small.mouseover(function(){
			span.css("display","block");
			$("#big").css("display","block");
	
		}).mousemove(function(e){
				var evt = e || window.event;
				var offLeft = small.offset().left
				var offTop = small.offset().top
				
				var x = evt.clientX - offLeft -spanW;
				var y = evt.clientY - offTop -spanH;

				if(x<0){
					x=0;
				}else if(x>small.width()-span.width()){
					x = small.width()-span.width();
				}
				if(y<0){
					y=0;
				}else if(y>small.height()-span.height()){
					y = small.height()-span.height();
				}
				span.css({left:x,top:y});
				bLiX = x/(small.width()-span.width());
				bLiY = y/(small.height()-span.height());
				var omgx = -bLiX*(omg.width()-oBig.width());
				var omgy =  -bLiY*(omg.height()-oBig.height());
				omg.css({left:omgx,top:omgy});
				
			}).mouseout(function(){
				$("#big").css("display","none");
				span.css("display","none");
		});
		
		});

})(jQuery)

		
		
		
	
	
	
	
	
	
	
	
	
	
	

